import React, {JSX} from "react";
import {Image, View, Text} from "@tarojs/components";
import './index.scss';
import {padImgURI} from "../../../utils";

export interface IOrderItem {
  Name: string,
  Id: string,
  Price: string,
  Img: string
}

interface IOrders {
  list: Array<IOrderItem>
}

export const Orders: React.FC<IOrders> = ({list}): JSX.Element => {
  return (
    <View className='Order'>
      {list.map(item => (
        <OrderItem key={item.Id} item={item}></OrderItem>
      ))}
    </View>
  )
}

export const OrderItem: React.FC<{ item: IOrderItem }> = ({item}): JSX.Element => {
  return (
    <View className='orderItem'>
      <View className='itemImage'>
        <Image lazyLoad mode='widthFix' src={padImgURI(item.Img)}></Image>
      </View>

      <View className='info justify-between align-center'>
        <View className='align-center'>
          <Text className='name break-col1'>{item.Name}</Text>
          <Text className='price'>￥{item.Price}</Text>
        </View>

        <View className='button flex-center'>
          预订
        </View>
      </View>
    </View>
  )
}

export default Orders;
